<template>
  <div>
    <van-nav-bar title="视频教程">
      <img
        slot="left"
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        alt=""
        @click="onClickLeft"
      />
    </van-nav-bar>
    <div class="handbook-img">
      <div>
        <p>{{ appName }}</p>
        <p>操作手册</p>
      </div>
      <img src="~assets/image/img_login.png" width="120" height="80" alt="" />
    </div>
    <div
      class="handbook-text"
      v-for="(item, index) in listData"
      :key="index"
      @click="getSrc(item.title, item.content)"
    >
      <p>{{ item.title }}</p>

      <img
        src="../../assets/image/arr_rigth.png"
        alt=""
        width="9px"
        height="15"
      />
    </div>
  </div>
</template>
<script>
import { queryNewsInfoApi } from "network/ApiServe";

export default {
  data() {
    return {
      appName: this.appName,
      listData: [],
      text: "视频教程",
      page: 0,
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    this.appName = localStorage.getItem("appName");
    this.brandId = localStorage.getItem("brandId");
  },
  mounted() {
    this.getNewInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    getNewInfo() {
      queryNewsInfoApi(this.brandId, this.text, this.page)
        .then((res) => {
          console.log(res);
          if (res.resp_code === "000000") {
            this.listData = res.result.content;
            console.log(this.listData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSrc(titles, url) {
      window.location.href = url;
      // 链接 跨域问题 后面再解决
      // this.$router.push({
      //   name: "OpenWeb",
      //   params: {
      //     title: titles,
      //     url: urls,
      //   },
      // });
    },
  },
};
</script>
<style scoped>
.handbook-img {
  height: 150px;
  background-color: #121212;
  color: #f1ce8a;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.handbook-img p {
  margin-top: 20px;
}
.handbook-text {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #efefef;
  font-size: 16px;
}
</style>